<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Variable Setup ---
        const canvasWidth = 600;
        const canvasHeight = 400;
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        const railYTop = 100;
        const railYBottom = 250;
        const midY = (railYTop + railYBottom) / 2;
        const rodLeftX = 150;
        const rodRightX = 400;

        // --- Helper function to draw B-field symbol (⊗) ---
        function drawBFieldSymbol(x, y, radius) {
            ctx.save();
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();
            const d = radius * 0.707; // sin(45 deg) * radius
            ctx.beginPath();
            ctx.moveTo(x - d, y - d);
            ctx.lineTo(x + d, y + d);
            ctx.moveTo(x - d, y + d);
            ctx.lineTo(x + d, y - d);
            ctx.stroke();
            ctx.restore();
        }

        // --- Draw Main Components ---

        // 1. Draw Rails
        ctx.beginPath();
        ctx.moveTo(40, railYTop);
        ctx.lineTo(canvasWidth - 40, railYTop);
        ctx.moveTo(40, railYBottom);
        ctx.lineTo(canvasWidth - 40, railYBottom);
        ctx.stroke();

        // 2. Draw Rods
        ctx.beginPath();
        ctx.moveTo(rodLeftX, railYTop);
        ctx.lineTo(rodLeftX, railYBottom);
        ctx.moveTo(rodRightX, railYTop);
        ctx.lineTo(rodRightX, railYBottom);
        ctx.stroke();

        // 3. Draw B-Field
        const bFieldRadius = 14;
        drawBFieldSymbol(90, midY, bFieldRadius);
        drawBFieldSymbol(275, midY, bFieldRadius);
        drawBFieldSymbol(490, midY, bFieldRadius);

        ctx.font = 'bold 24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('B', 275, midY + 40);

        // 4. Draw Labels on Rods
        const labelDist = 15;
        // Left Rod
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.textAlign = 'left';
        // Using script l (ℓ) Unicode character U+2113 for better accuracy
        ctx.fillText('ℓ', rodLeftX + labelDist, railYTop + 30);
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('m', rodLeftX + labelDist, midY);
        ctx.fillText('R', rodLeftX + labelDist, railYBottom - 30);
        
        // Right Rod
        ctx.textAlign = 'right';
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('ℓ', rodRightX - labelDist, railYTop + 30);
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('m', rodRightX - labelDist, midY);
        ctx.fillText('R', rodRightX - labelDist, railYBottom - 30);

        // 5. Draw Velocity Vector
        const arrowY = midY + 15;
        const arrowStartX = rodRightX;
        const arrowEndX = rodRightX + 90;
        ctx.beginPath();
        ctx.moveTo(arrowStartX, arrowY);
        ctx.lineTo(arrowEndX, arrowY);
        // Arrowhead
        ctx.moveTo(arrowEndX, arrowY);
        ctx.lineTo(arrowEndX - 10, arrowY - 6);
        ctx.moveTo(arrowEndX, arrowY);
        ctx.lineTo(arrowEndX - 10, arrowY + 6);
        ctx.stroke();

        // Velocity Label v₀
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('v', arrowEndX + 8, arrowY);
        ctx.font = '16px Times New Roman';
        ctx.fillText('0', arrowEndX + 20, arrowY + 8);

        // 6. Draw Caption
        ctx.font = '22px "SimSun", "Songti SC"';
        ctx.textAlign = 'center';
        ctx.fillText('电图 3.6.1', canvasWidth / 2, canvasHeight - 50);
    </script>
</body>
</html>